<template>
  <Tabs type="card" @on-click="tabChange">
    <TabPane v-for="(tab, index) in tabList" :key="index" :label="tab.label" :name="tab.name">
      <div v-if="tab.order===1">
        <Row style="padding:20px" :gutter="16">
          <Col span="4" offset="2">
            <Card :bordered="false" shadow>
              <p slot="title">联盟总人数</p>
              <p>{{leagueInfo.total}}</p>
            </Card>
          </Col>
          <Col span="4">
            <Card shadow>
              <p slot="title">联盟委员会人数</p>
              <p>{{leagueInfo.leagueCommittee}}</p>
            </Card>
          </Col>
          <Col span="4">
            <Card shadow>
              <p slot="title">联盟管理机构</p>
              <p>{{leagueInfo.leagueManager}}</p>
            </Card>
          </Col>
          <Col span="4">
            <Card shadow>
              <p slot="title">联盟成员</p>
              <p>{{leagueInfo.leagueMembers}}</p>
            </Card>
          </Col>
          <Col span="4">
            <Card shadow>
              <p slot="title">监管机构</p>
              <p>{{leagueInfo.superviseMembers}}</p>
            </Card>
          </Col>
        </Row>
        <Row style="padding:20px">
          <Col span="24"  style="background-color: #ffffff;border-radius: 20px">
            <league-total-member  />
          </Col>
        </Row>
        <Row style="padding:20px">
          <Col span="24"  style="background-color: #ffffff;border-radius: 20px">
            <league-consist />
          </Col>
        </Row>
      </div>
      <div v-if="tab.order===2" >
        <Row style="padding:20px" :gutter="16">
          <Col span="6">
            <Card :bordered="false" shadow>
              <p slot="title">联盟总生产量</p>
              <p>{{carbonInfo.createToken}}</p>
            </Card>
          </Col>
          <Col span="6">
            <Card shadow>
              <p slot="title">联盟总销毁量</p>
              <p>{{carbonInfo.destoryToken}}</p>
            </Card>
          </Col>
          <Col span="6">
            <Card shadow>
              <p slot="title">联盟总购买量</p>
              <p>{{carbonInfo.buyToken}}</p>
            </Card>
          </Col>
          <Col span="6">
            <Card shadow>
              <p slot="title">联盟碳中和占比</p>
              <p>{{carbonInfo.ratio}}</p>
            </Card>
          </Col>
        </Row>
        <Row style="padding:20px">
          <Col span="24"  style="background-color: #ffffff;border-radius: 20px">
            <production-and-marketing />
          </Col>
        </Row>
        <Row style="padding:20px">
          <Col span="24"  style="background-color: #ffffff;border-radius: 20px">

          </Col>
        </Row>
      </div>
      <div v-if="tab.order===3" >
        <Row style="padding:20px">
          <Col span="24"  style="background-color: #ffffff;border-radius: 20px">
            <Card shadow style="border-radius: 20px">
              <p slot="title" style="height: 30px!important;">成员信息</p>
              <Table :data="memberList" :columns="memberListColumns" height="600px" stripe></Table>
            </Card>
          </Col>
        </Row>
      </div>
      </TabPane>
  </Tabs>

</template>
<script>
import LeagueConsist from "@/views/League/components/leagueInfo/components/LeagueConsist";
import LeagueTotalMember from "@/views/League/components/leagueInfo/components/LeagueTotalMember";
import ProductionAndMarketing from "@/views/League/components/leagueInfo/components/ProductionAndMarketing";
import TimeJS from "@/utils/Time";
export default {
  components:{
    ProductionAndMarketing,
    LeagueTotalMember,
    LeagueConsist,
  },
  data(){
    return{
      leagueInfo:{
        total:0,
        leagueCommittee:0,
        leagueManager:0,
        leagueMembers:0,
        superviseMembers:0
      },
      carbonInfo:{
        createToken:0,
        destoryToken:0,
        buyToken:0,
        ratio:0+"%"
      },
      tabList: [
        {
          label: '成员总览',
          order:1,
          name: '成员总览'
        },
        {
          label: '产销总览',
          order:2,
          name: '产销总览'
        },
        {
          label: '成员明细',
          order:3,
          name: '成员明细'
        }
      ],
      memberList:[],
      memberListColumns: [
        {
          title: '地址',
          key: 'memberInfoAddress',
          render: (h, params) => {
            return h('Poptip', {
              props: {
                trigger: 'hover',
                title: '地址',
                placement: 'right'
              }
            }, [
              h('Tag', params.row.memberInfoAddress),
              h('div', {
                slot: 'content'
              }, [
                h('ul', params.row.memberInfoAddress)
              ])
            ]);
          }
        },
        {
          title: '名称',
          key: 'memberInfoName',
          render: (h, params) => {
            return h('Tag', params.row.memberInfoName);
          }
        },
        {
          title: '生产总量',
          key: 'createToken',
          sortable: true,
          render: (h, params) => {
            return h('Tag', params.row.createToken);
          }
        },{
          title: '销毁总量',
          key: 'burnToken',
          sortable: true,
          render: (h, params) => {
            return h('Tag', params.row.burnToken);
          }
        },{
          title: '购买总量',
          key: 'buyToken',
          sortable: true,
          render: (h, params) => {
            return h('Tag', params.row.buyToken);
          }
        },{
          title: '碳信用',
          key: 'CEL',
          sortable: true,
          render: (h, params) => {
            return h('Tag', params.row.CEL);
          }
        },{
          title: '能效等级',
          key: 'EL',
          sortable: true,
          render: (h, params) => {
            return h('Tag', params.row.EL);
          }
        },
        {
          title: '加入时间',
          key: 'memberInfoTime',
          width: 200,
          align: 'center',
          sortable: true,
          render: (h, params) => {
            return h('div', TimeJS.unixToWhole(parseInt(params.row.memberInfoTime)));
          }
        },
        {
          title: 'Action',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看')
          }
        }
      ],
    }
  },
  mounted() {
    this.LeagueJS.getLeagueInfo(info=>{
      this.leagueInfo.total = info._total
      this.leagueInfo.leagueCommittee = info._leagueCommittee
      this.leagueInfo.leagueManager = info._leagueManager
      this.leagueInfo.leagueMembers = info._leagueMembers
      this.leagueInfo.superviseMembers = info._superviseMembers
    })
  },
  watch:{
"tab.order":function (val){
  console.log(val)
}
  },
  methods: {
    tabChange(name){
      if(name === "产销总览"){
        this.LeagueJS.getCarbonFactoryHistory(info=>{
          console.log(info)
          this.carbonInfo={
            createToken: info[info.length-1].createToken,
            buyToken: info[info.length-1].buyToken,
            destoryToken: info[info.length-1].destoryToken,
            ratio: ((info[info.length-1].destoryToken/info[info.length-1].createToken)*100).toFixed(2)+'%'
          }
          let child=[[],[],[],[]]
          info.map((i,j)=>{
            child[0].push(i.createToken)
            child[1].push(i.destoryToken)
            child[2].push(i.buyToken)
            child[3].push(j)
            j++
          })
        })
      }else if(name === "成员明细"){
        this.getMemberList()
      }
    },
    getMemberList(){
      let data = [];
      this.LeagueJS.getAllMemberInfo(list=>{
        list.map((i,j)=>{
          let str={
            memberInfoAddress:i.memberInfoAddress,
            memberInfoName:i.memberInfoName,
            memberInfoTime:i.memberInfoTime,
            createToken:i.createToken,
            burnToken:i.burnToken,
            buyToken:i.buyToken,
            CEL:i.CEL,
            EL:i.EL
          }
          data.push(str)
          j++
        })
      })
      this.memberList =data
    }
  }
}
</script>
<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
